<template>
  <div class="article-component">
    <div class="article" v-if="article && !article.hide">
      <div class="content" @click="onClickContent">
        <a v-show="article.newsUrl" :href="article.newsUrl" target="view_window" class="btnmore">查看原文</a>
        <router-link class="title" v-bind="{to:article.routerUrl}"><strong>{{ article.title }}</strong></router-link>
        <p class="time">{{ article.time }}</p>
        <p class="text">{{ article.text }}</p>
      </div>
      <div class="property">
        <div class="tags" v-if="tags && tags.length">
          <ul>
            <li v-for="(tag, index) in tags" :key="index" :style="getTagColor(index)" @click="onClickTag(tag)">{{
              tag.name }}
            </li>
          </ul>
        </div>
        <div class="action" v-if="articleAction">
          <action-list
            :action="articleAction"
            @like="toggleLike"
            @message="postNewComment"
            @collect=""
            @transmit=""
            @share="onShare">
          </action-list>
        </div>
      </div>
    </div>
    <div class="comments" v-if="newComment && newComment.show">
      <div class="new-comment">
        <post-comment
          :show="newComment.show"
          :textarea="newComment.textarea"
          :btn="newComment.btn"
          :content="newComment.content"
          @post-comment="submitComment">
        </post-comment>
      </div>
      <div class="comment-list" v-if="comments && comments.length">
        <ul>
          <li class="comment-item" v-for="(item, index) in comments" :key="index">
            <comment
              :comment="item"
              :replies="item.replies"
              @like="onLike"
              @report-comment="onReportComment"
              @delete-comment="onDeleteComment"
              @post-comment-reply="onPostCommentReply"
              @report-reply="onReportReply"
              @post-reply-reply="onPostReplyReply"
              @delete-reply="onDeleteReply">
            </comment>
          </li>
        </ul>
      </div>
      <div class="more-comments" v-if="article.nextCommentPage && moreCommentBtn">
        <el-button type="text" :loading="moreCommentBtn.loading" @click="loadMoreComment">{{ moreCommentBtn.text ||
          '加载更多评论' }}
        </el-button>
      </div>
    </div>
  </div>
</template>

<style scoped>
  .content {
    line-height: 1.6;
  }

  .title {
    font-size: 18px;
    color: #19222E;
    width: 80%;
    height: 24px;
    /*margin-bottom: 8px;*/
    /*font-size: 18px;*/
    /*color: #19222E;*/
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }

  .btnmore {
    float: right;
    /*position: absolute;*/
    /*top: 5px;*/
    right: 0;
    font-size: 14px;
    color: #AAB1BB;
  }

  .time {
    color: #AAB1BB;
    font-size: 14px;
  }

  .text {
    color: #465364;
    font-size: 14px;
    height: 64px;
    margin-bottom: 20px;
    /*font-size: 14px;*/
    /*color: #465364;*/
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }

  .property {
    margin-top: 8px;
    height: 22px;
  }

  .tags {
    height: inherit;
    width: 460px;
    overflow: hidden;
    padding-left: 30px;
    /*background: url(./imgs/tag.png) no-repeat left center;*/
    float: left;
    padding-left: 26px;
    background-image: url(./imgs/tag.png);
    background-repeat: no-repeat;
    background-size: 20px 20px;
    -moz-background-size: 20px 20px;
  }

  .tags ul {
    float: left;
  }

  .tags ul li {
    float: left;
    border: 1px solid;
    font-size: 14px;
    color: #3F9BFE;
    border-radius: 15px;
    line-height: 20px;
    height: 20px;
    padding: 0 10px;
    margin-left: 24px;
  }

  .action {
    height: inherit;
    /*padding-top: 5px;*/
    float: right;
    font-size: 12px;
  }

  .comments {
    background: #fff;
    margin-top: 20px;
    padding: 30px 30px 30px;
  }

  .comment-item {
    border-bottom: 1px solid #ccc;
    padding-bottom: 20px;
  }

  .comment-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  .more-comments {
    margin-top: 15px;
    text-align: center;
  }
</style>

<script>
  import postComment from '../post-comment/index';
  import comment from '../comment/index';
  import share from '../share/index';
  import actionList from '../action-list/index';

  let STATUS = {
    notStart: '',
    doing: 'doing',
    done: 'done',
    fail: 'fail'
  };
  export default {
    props: {
      article: {
        type: Object,
        default: () => {
          return null;
        }
      },
      tags: {
        type: Array,
        default: () => {
          return [];
        }
      },
      comments: {
        type: Array,
        default: () => {
          return [];
        }
      }
    },
    components: {postComment, comment, share, actionList},
    computed: {
      articleAction() {
        return {
          likeDone: this.article.likeDone,
          likeCount: this.article.likeCount,
          messageCount: this.article.messageCount,
          shareCount: this.article.shareCount,
          shareUrl: this.article.shareUrl,
          shareTitle: this.article.title,
          likeActionStatus: this.article.likeActionStatus,
          collectStatus: this.article.collectStatus,
          transmitStatus: this.article.transmitStatus,
        };
      }
    },
    data() {
      return {
        newComment: null,
        share: null,
        moreCommentBtn: null,
        isFirstLoadComment: true
      };
    },
    watch: {
      'article.postActionStatus'(newStatus, oldStatus) {
        if (newStatus === STATUS.done && oldStatus !== STATUS.done) {
          this.postCommentActionDone();
        }
      },
      'article.loadActionStatus'(newStatus, oldStatus) {
        if (newStatus === STATUS.done && oldStatus !== STATUS.done) {
          if (this.moreCommentBtn) {
            this.moreCommentBtn.loading = false;
            this.moreCommentBtn.text = '';
          }
        }
      }
    },
    methods: {
      userIsLogin() {
        if (!this.$_isLogin) {
          this.$_jumpToLogin({
            viewName: this.$route.name,
            query: this.$route.query || ''
          });
          return false;
        }
        return true;
      },
      getTagColor(index) {
        let colors = ['#B795F9', '#FF8DA9', '#3F9BFE', '#FEA045', '#6ACB39'];
        let targetColor = colors[index % 5];
        if (targetColor) {
          return `color: ${targetColor};`;
        }
        return '';
      },
      onClickTag(tag) {
        // if (typeof tag.handler === 'function') {
        //   tag.handler(tag);
        // } else {
        //   this.$router.push({name: '', query: {id: tag.id}});
        // }
      },
      onClickContent() {
        // if (this.article.handler) {
        //   this.article.handler(this.article);
        // } else {
        //   this.$router.push({name: '', query: {id: this.article.id}});
        // }
      },
      toggleLike() {
        if (!this.userIsLogin()) {
          return;
        }
        if (this.article.likeActionStatus === STATUS.doing) {
          return;
        }
        this.$emit('like', this.article, !this.article.likeDone);
      },
      onShare(type) {
        this.$emit('share');
      },
      submitComment(comment) {
        if (!this.userIsLogin()) {
          return;
        }
        if (this.article.postActionStatus === STATUS.doing) {
          return;
        }
        this.newComment.content = comment;
        this.newComment.btn.loading = true;
        this.$emit('post-comment', this.article, comment);
      },
      postCommentActionDone() {
        let update = () => {
          this.newComment.btn.loading = false;
          this.newComment.content = '';
        };
        // 使用nextTick避免content 变化太快，使中间的数据变换被忽视
        this.$nextTick().then(update);
      },
      postNewComment() {
        if (this.isFirstLoadComment && this.article.nextCommentPage && this.article.loadActionStatus !== STATUS.doing) {
          this.isFirstLoadComment = false;
          this.loadMoreComment();
        }
        if (this.newComment) {
          if (!this.newComment.btn.loading) {
            this.newComment.show = !this.newComment.show;
          }
        } else {
          this.newComment = {
            show: true,
            textarea: {
              placeholder: '说点什么',
              autosize: {minRows: 3, maxRows: 10},
              type: 'textarea'
            },
            btn: {
              type: 'primary',
              loading: false,
              text: '发表评论'
            },
            content: ''
          };
        }
      },
      onLike(comment, status) {
        this.$emit('like-comment', comment, status);
      },
      onReportComment(comment, reportArgs) {
        this.$emit('report-comment', comment, reportArgs, this.article);
      },
      onDeleteComment(comment) {
        this.$emit('delete-comment', this.article, comment);
      },
      onPostCommentReply(comment, reply) {
        this.$emit('post-comment-reply', this.article, comment, reply);
      },
      onReportReply(reply, reportArgs) {
        this.$emit('report-reply', reply, reportArgs, this.article);
      },
      onDeleteReply(comment, reply) {
        this.$emit('delete-reply', this.article, comment, reply);
      },
      onPostReplyReply(comment, reply, content) {
        this.$emit('post-reply-reply', this.article, comment, reply, content);
      },
      loadMoreComment() {
        if (!this.moreCommentBtn) {
          this.moreCommentBtn = {loading: true};
        } else {
          if (this.moreCommentBtn.loading) {
            return;
          }
          this.moreCommentBtn.loading = true;
          this.moreCommentBtn.text = '评论加载中...';
        }
        this.$emit('load-comments');
      }
    }
  };
</script>

